<script setup>
// < !--导航栏页面，根据路由地址生成导航栏-- >
import { Vue_App_Token } from '@/utils/config'
import { deleteCookie } from '@/utils/Storage.js'
import { reactive, watch } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router/beforeEach'

// 引入现有所有路由地址
import { routes } from '@/router/index'

import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'

const route = useRoute()

const state = reactive({
  collapsed: true,
  selectedKeys: [],
  openKeys: [routes[0].path],
  preOpenKeys: ['sub1'],
})

const items = reactive(
  routes.map((route) => {
    return {
      key: route.path,
      icon: route.icon,
      label: route.meta.routerName,
      title: route.meta.routerName,
    }
  }),
)

watch(
  () => route.path,
  (newVal) => {
    state.selectedKeys = [newVal]
  },
)

const toggleCollapsed = () => {
  state.collapsed = !state.collapsed
}

const handleMenuClick = ({ key }) => {
  state.selectedKeys = [key]
  router.push(key)
}

const exitUser = () => {
  deleteCookie(Vue_App_Token)
}
</script>

<template>
  <div class="side">
    <div class="fixd">
      <div class="teitel">
        <a-button
          type="primary"
          @click="toggleCollapsed"
        >
          <MenuUnfoldOutlined v-if="state.collapsed" />
          <MenuFoldOutlined v-else />
        </a-button>
      </div>
      <!-- 导航菜单 -->
      <!-- v-model绑定state.openKeys 和 state.selectedKeys，实现菜单的展开状态和选中状态的控制 -->
      <a-menu
        v-model:openKeys="state.openKeys"
        v-model:selectedKeys="state.selectedKeys"
        mode="inline"
        theme="light"
        :inline-collapsed="state.collapsed"
        :items="items"
        @click="handleMenuClick"
      >
        <template #default="{ item }">
          <a-menu-item
            :key="item.key"
            :class="{ 'selected-menu-item': state.selectedKeys.includes(item.key) }"
          >
            <span>{{ item.title }}</span>
          </a-menu-item>
        </template>
      </a-menu>
      <div class="teitel">
        <a-button
          type="primary"
          @click="exitUser"
        >
          退出登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.side {
  margin-left: 1vh;
  margin-top: 3vh;
  position: fixed;
}

.teitel {
  display: flex;
  justify-content: center;
  align-items: center;

  /* margin-bottom: 10px; */
}

.css-dev-only-do-not-override-1hsjdkk {
  /* background: url('@/assets/bg3.jpg') no-repeat center / 120px ; */
  /* background-color: #5677778c; */
  outline: 2px solid #dfa421;
  background-color: #165047;
  opacity: 0.5;
  outline-offset: 3px;
  border-radius: 5px;
  color: #dfa421;
  margin-bottom: 10px;
  padding: 10px 1rem;
  transition: 0.25s;
}

.css-dev-only-do-not-override-1hsjdkk:hover {
  opacity: 1;
}

.css-dev-only-do-not-override-1hsjdkk:active {
  outline-offset: 5px;
}

/* 当视口宽度小于 600px 时应用的样式 */
@media screen and (max-width: 600px) {
  /* .content {
    width: 80px;
    height: 80px;
    background-color: aqua;
  } */
}

/* 当视口宽度大于等于 600px 且小于等于 1200px 时应用的样式 */
@media screen and (min-width: 601px) and (max-width: 1200px) {
  .side {
    position: fixed;
  }
}

/* 当视口宽度大于 1200px 时应用的样式 */
@media screen and (min-width: 1201px) {
  .side {
    position: fixed;
  }
}
</style>
